<template>
    <el-card
    v-if="isLogin"
    >
        <div class="tools-header">
            <div class="type-name">
                {{typeName}}&nbsp;
                <p class="num">{{num}}</p>
                &nbsp;{{unit}}&nbsp;&nbsp;
            </div>

            <el-button 
            type="text" 
            v-if="isLogin && num =='0'" 
            @click="buy"
            >
                去购买
            </el-button>

            <el-button 
            type="text" 
            v-if="!isLogin" 
            @click="gologin"
            >
                去登录
            </el-button>

            <div class="append">
                <slot name="append">
                    <i class="el-icon-info"></i>
                    目前数据报告仅支持河北省，其他地区陆续开接入。
                </slot>
            </div>
        </div>
    </el-card>
</template>

<script>

import { mapActions } from 'vuex';

export default {
    head: {},
    components: {},
    props: {
        typeName: {
            type: String,
            default: ""
        },
        num: {
            type: [String,Number],
            default: 0
        },
        unit:{
            type: String,
            default: "条"
        },
        isLogin:{
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {}
    },
    methods: {
        ...mapActions({
            showLogin: 'global-dialog/showLogin',
        }),
        buy(){
            const SERIAL_CODE = this.$cookies.get('SERIAL_CODE');

            if (!SERIAL_CODE) {
                this.showLogin(() => {
                    this.$emit('buy')
                });
            }else{
                this.$emit('buy')
            }
        },
        gologin(){
            this.showLogin();
        },
    },
    created() {
        
    },
    mounted() {

    },
}
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .el-button{
        padding: 0;
    }

    .tools-header {
        display: flex;
        align-items: baseline;

        .type-name {
            display: flex;

            .num {
                color: red;
            }
        }

        .append{
            margin-left: 1em;
            color: #666;
        }
    }
</style>
